<template>
<div>
  <Navigation></Navigation>
<div>
<div class="hook-container">
  <div style="padding: 30px;">
    <a-button type="primary" @click="showEdit(null)">
      新增hook
    </a-button>
  </div>

  <div  style="display: flex">
    <hook-item v-for="(i,index) in data" :name="i['project_name']"
               :triggerNumber="i['triggerNumber']"
               :accessToken="i['access_token']"
               :lastTriggerTime="i['lastTriggerTime']"
               :dockerImage="i['docker_image']"
               :id="i['id']"
               :key="index"
               :onEdit="showEdit"
    >
    </hook-item>
  </div>
</div>
</div>
  <a-modal v-model="showHook" title="编辑webhook" @ok="save" :width="'800px'" :height="'100px'">
    <div style=";width: 800px;border-radius: 10px">
      <a-form-model title="User Info" :label-col="{span: 4}" :wrapper-col="{span: 14}">
        <a-form-model-item label="项目名称">
          <a-input v-model:value="currentHook.project_name" />
        </a-form-model-item>
        <a-form-model-item label="构建镜像">
          <a-input v-model:value="currentHook.docker_image" />
        </a-form-model-item>
        <a-form-model-item label="访问秘钥">
          <a-input v-model:value="currentHook.access_token" />
        </a-form-model-item>
        <a-form-model-item label="备注">
          <a-input v-model:value="currentHook.remark" type="textarea" />
        </a-form-model-item>
        <a-form-model-item label="构建脚本">
          <div style="height: 600px;">
            <CodeEdit
              :language="'shell'"
              :programe_source="currentHook.run_shell"
              :onChange="(value)=>{this.currentHook.run_shell=value}"
              :key="key"
            >

            </CodeEdit></div>
        </a-form-model-item>
      </a-form-model>
    </div>
  </a-modal>
  <div class="console">
    <log-menu></log-menu>
  </div>
</div>
</template>

<script>
import HookItem from "../common/hookItem";
import CodeEdit from "../common/CodeEdit";
import { message } from 'ant-design-vue';
import { FormModel } from 'ant-design-vue';
import { Input } from 'ant-design-vue';
import LogMenu from "../common/LogMenu";
import axios from "axios";
import qs from "_qs@6.10.3@qs";
import Navigation from "../common/Navigation";
export default {
  components: {
    Navigation,
    HookItem,
    CodeEdit,
    'a-form-model':FormModel,
    'a-input':Input,
    'log-menu':LogMenu
  },
  data(){
    return {
      key:"a-key",
      showHook:false,
      programe:"#!/bin/sh\n",
      currentHook:{
        project_name:'',
        docker_image:'',
        remark:'',
        id:0,
        access_token:'',
        run_shell:''
      },
      data:[

      ]
    }
  },
  name: "webhook",

  created(){
    this.getList()
  },
  methods:{
    getList(){
      let url = baseUrl+"hook/list"
      axios.post(url,qs.stringify(this.data)).then((res)=>{
        this.data = res.data.data.list
      }).catch((err)=>{
        console.log(err)
      })
    },
    save(){
      return new Promise((resolve, reject)=>{
        this.createHook().then(()=>{
          message.info("保存成功")
          resolve()
          this.getList();
        }).catch((err)=>{
          message.error(err)
          reject(err)
        })
      })
    },
    cancel(){

    },
    showEdit(id)
    {
      this.key = 'a-key-'+((new Date()).valueOf()*1000);
      this.showHook = true;
      if (id){
        for (let i in this.data){
          let item = this.data[i];

          if (item['id']==id){
            this.currentHook = item;
            this.$forceUpdate()
            return;
          }
        }
      }
      this.currentHook = {
        project_name:'',
        docker_image:'',
        remark:'',
        id:0,
        access_token: '',
        run_shell:'#!/bin/sh \n',
      }
      this.$forceUpdate()
    },
    createHook()
    {
      return new Promise((resolve, reject)=>{
        let url=''
        if (!this.currentHook.id){
          url = baseUrl+"hook/addHook"
        }else {
          url = baseUrl+"hook/editHook"
        }
        axios.post(url,qs.stringify(this.currentHook)).then((res)=>{
          resolve(res.data)
        }).catch((err)=>{
          reject(err)
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
